<template>
  <div class="enterpriseDialog-container ">
    <el-dialog
      :title="differenttitle? '编辑用户' : '创建用户'"
      :visible="visible"
      @update:visible="$emit('update:visible', $event)"
      width="60%"
      @closed="onclosed"
      v-loading="loading"
    >
      <el-form ref="enterpriseform" :rules="enterpriseRules" :model="enterpriseForm" label-width="100px">
        <el-form-item label="企业名称" prop="shortName">
          <el-input v-model="enterpriseForm.shortName"></el-input>
        </el-form-item>
        <el-form-item label="所属公司" prop="company">
          <el-input v-model="enterpriseForm.company"></el-input>
        </el-form-item>
        <div style="text-align: center; margin-bottom: 35px;">https://www.tianyancha.com （在此可查询所属公司全称及简称）</div>
        <div style="display: flex;">
          <el-form-item label="城市地区" prop="province">
          <el-select style="width: 48%; margin-right: 4%" v-model.trim="enterpriseForm.province" placeholder="请选择"
          @change="changeFn"
          >
            <el-option
              v-for="(item, index) in provincesList"
              :key="index"
              :label="item"
              :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="city">
            <el-select style="width: 48%" v-model="enterpriseForm.city" placeholder="请选择">
              <el-option
                v-for="(item, index) in citysList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
        </el-form-item>
        </div>
        <el-form-item label="方向(企业标签)" prop="tags">
          <el-input v-model="enterpriseForm.tags"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input
            type="textarea"
            autosize
            placeholder="请输入内容"
            v-model="enterpriseForm.remarks">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onClose">取 消</el-button>
        <el-button type="primary" @click="onConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { AddEnterprise, putEnterprise, Enterprisedetails } from '@/api/enterprise'
import { provinces, citys } from '@/api/citys'

export default {
  name: 'enterpriseDialog',
  props: {
    visible: Boolean,
    differenttitle: Boolean,
    selectId: Number
  },
  data () {
    return {
      enterpriseForm: {
        shortName: '',
        company: '',
        province: '',
        city: '',
        tags: '',
        remarks: ''
      },
      provincesList: provinces(), // 城市
      citysList: [], // 地区
      loading: false,
 
      enterpriseRules: {
        shortName: [
          { required: true, message: '企业简称不能为空', trigger: 'blur' }
        ],
        company: [
          { required: true, message: '所属公司不能为空', trigger: 'blur' }
        ],
        city: [
          { required: true, message: '地区不能为空', trigger: 'blur' }
        ],
        province: [
          { required: true, message: '城市不能为空', trigger: 'blur' }
        ],
        tags: [
          { required: true, message: '标签不能为空', trigger: 'blur' }
        ],
        remarks: [
          { required: true, message: '备注不能为空', trigger: 'blur' }
        ]
      },
      options: []
    }
  },
  methods: {
    onClose () {
      this.$emit('update:visible', false)
    },
    onConfirm () {
      this.$refs.enterpriseform.validate(async(valid)=>{
        if (valid) {
          if(!this.differenttitle) {
            await AddEnterprise({...this.enterpriseForm, isFamous: true})
          } else {
            await putEnterprise(this.selectId, {...this.enterpriseForm, isFamous: true})
          }
        }
      })
      
      this.$emit('refresh')
      this.onClose()
    },
    onclosed () {
      this.$refs.enterpriseform.resetFields()
    },
    changeFn () {
      // 获取地区赋值给本地
      this.citysList = citys(this.enterpriseForm.province)
    },
    // 获取公司管理详情
    async getEnterprisedetails () {
      this.loading = true
      const item  = await Enterprisedetails(this.selectId)
      console.log(item);
      this.enterpriseForm = item
      this.loading = false
      // console.log(this.enterpriseForm);
    }
  },
  watch: {
    visible (val) {
      if(val && this.selectId && this.differenttitle){
        this.getEnterprisedetails()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>